<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.box{
			width: 500px;
			height: 500px;
			background-color: antiquewhite;
			padding-top: 50px;
		}
		.box>.block_big_cicle{
			width: 300px;
			height: 300px;
			background-color: black;
			border-radius: 50%;
			margin: 50px auto;
			position: relative;
			animation: move 1.5s  infinite linear;
		}
		.hide_half{
		    width: 150px;
			height: 300px;
			overflow: hidden;
			
		}
		.big_white{
			width: 300px;
			height: 300px;
			background-color: white;
			border-radius: 50%;
		}
		.common_cicle_black,.common_cicle_white{
			width: 150px;
			height: 150px;
			/* background-color: red; */
			border-radius: 50%;
			position: absolute;
		}
		.common_cicle_black{
			background-color: #000000;
			top: 0px;
			left: 75px;
		}
		.common_cicle_white{
			bottom: 0px;
			left: 75px;
			background-color: white;
		}
		.smallest_cicle_black{
			width: 70px;
			height: 70px;
			border-radius: 50px;
			background-color: black;
			position: absolute;
			bottom: 31px;
			left: 123px;
		}
		.smallest_cicle_white{
			width: 70px;
			height: 70px;
			border-radius: 50px;
			background-color: white;
			position: absolute;
			top: 31px;
			left: 123px;
		}
		@keyframes move{
			from{
				transform: rotate(0deg);
			}
			to{
				transform: rotate(-360deg);
			}
		}
	</style>
	<body>
		<div class="box">
			<div class="block_big_cicle">
				<div class="hide_half">
					<div class="big_white">
					</div>
				</div>
				<div class="common_cicle_white"></div>
				<div class="common_cicle_black"></div>
				<div class="smallest_cicle_white"></div>
				<div class="smallest_cicle_black"></div>
			</div>
		</div>
	</body>
</html>
